<ng-template #template>
  <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()" (dblclick)="adorner.dblclick($event)"
    (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)"
    [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
    <div *ngIf="adorner.showHiddenTitle" [class]="adorner.cssCollapsedHiddenHeader">
      <sv-ng-element-title *ngIf="!!model.hasTitle" [element]="model" [renderActions]="false"></sv-ng-element-title>
      <div *ngIf="!model.hasTitle" [class]="adorner.cssCollapsedHiddenTitle">
        <span class="svc-fake-title">{{model.name}}</span>
      </div>
    </div>
    <div [class]="adorner.css()" [key2click]="{ disableTabStop: true }" (click)="adorner.select(adorner, $event)">
      <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>
      <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>
      <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
      <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
      <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
          sv-ng-svg-icon></svg>
        <div class="svc-question__top-actions">
          <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
        </div>
      </div>
      <ng-container *ngIf="adorner.needToRenderContent">
        <svc-question-element-content 
          [componentName]="componentName" 
          [componentData]="componentData">
        </svc-question-element-content>
        <div *ngIf="adorner.isEmptyElement && !showPlaceholderComponent" class="svc-panel__placeholder_frame-wrapper">
          <div class="svc-panel__placeholder_frame">
            <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
          </div>
        </div>
        <ng-template *ngIf="adorner.isEmptyElement && !!showPlaceholderComponent"
          [component]="{ name: placeholderComponent, data: placeholderComponentData }">
        </ng-template>
        <ng-template *ngIf="adornerComponent"
          [component]="{ name: adornerComponent, data: { adorner: adorner, question: model } }">
        </ng-template>
        <svc-question-banner *ngIf="adorner.isBannerShowing" [model]="adorner.createBannerParams()">
        </svc-question-banner>
        <div class="svc-question__content-actions" (focusin)="adorner.select(adorner, $event)">
          <sv-action-bar [model]="adorner.actionContainer" [handleClick]="false"></sv-action-bar>
        </div>
      </ng-container>
    </div>
  </div>
</ng-template>